<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="栏目">
        <el-popover
          v-model="visiblePopover"
          placement="bottom-start"
          trigger="click"
          @show="filterText4 = ''"
        >
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText4">
          </el-input>
          <el-tree
            :filter-node-method="filterNode"
            ref="tree4" :props="props" :data="treeList" :highlight-current="false" node-key="code"
            :default-expand-all="true" :render-content="renderContent"
          >
          </el-tree>
          <el-select
            value-key='id' style="width: 250px" :clearable="true"
            popper-class="hide" slot="reference" v-model="listQuery.cmsNewsClassId" type="text"
            placeholder="请输入"
          >
            <el-option
              v-for="(item, index) in options" :key="item.value" :value="item.value" :label="item.label"
            ></el-option>
          </el-select>
        </el-popover>
      </el-form-item>
      <el-form-item label="启用状态">
        <el-select v-model="listQuery.enabled">
          <el-option value="" label="全部"></el-option>
          <el-option value="0" label="启用"></el-option>
          <el-option value="1" label="禁用"></el-option>
        </el-select>
      </el-form-item>
      <el-button
        class="filter-item" type="primary" icon="el-icon-search" @click="getList"
      >
        {{$t('table.search')}}
      </el-button>
      <el-button
        class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="success"
        icon="el-icon-plus"
      >新增
      </el-button>
    </el-form>

    <el-table stripe
      :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中..." border fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" label="数据源名称">
        <template slot-scope="scope">
          <span>{{scope.row.sourceName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数据库">
        <template slot-scope="scope">
          <span>{{scope.row.dbName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="启用状态">
        <template slot-scope="scope">
          <span>{{scope.row.enableStr}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="栏目">
        <template slot-scope="scope">
          <span>{{scope.row.className}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.actions')" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"
              class="button-icon el-icon-edit"></el-button>
          </el-tooltip>
          <el-tooltip v-if="!scope.row.enabled" content="停用" placement="top">
            <el-button type="danger" size="mini" @click="setStop(scope.row)"
              class="button-icon el-icon-close"></el-button>
          </el-tooltip>
          <el-tooltip v-else content="启用" placement="top">
            <el-button type="success" size="mini" @click="handleSetTime(scope.row)"
              class="button-icon el-icon-check"></el-button>
          </el-tooltip>
          <!--<el-button-->
          <!--v-if="scope.row.status!='deleted'" size="mini" type="danger"-->
          <!--@click="handleDelete(scope.row)"-->
          <!--&gt;{{$t('table.delete')}}-->
          <!--</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="170px"
        style='margin: 24px'
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="数据源名称" prop="name">
              <el-input v-model="temp.name" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据库" prop="dbSourceId">
              <el-select v-model="temp.dbSourceId" type="text" placeholder="请选择">
                <el-option
                  v-for="(option, index) in dbList" :key="option.id" :value="option.id"
                  :label="option.dbConfigName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        	<el-col :span="12">
            <el-form-item label="数据源类型" prop="type">
	     				<el-select v-model="temp.type" placeholder="请选择" :disabled="dialogStatus=='update'" @change='getColumn'>
              	<el-option label="智能资讯" :value="0" ></el-option>
              	<el-option label="机器写稿" :value="1" ></el-option>
	        		</el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="查询方式" prop="isUserSql">
              <el-radio v-model="temp.isUserSql" :label="1">字段查询</el-radio>
              <el-radio v-model="temp.isUserSql" :label="0">自定义SQL</el-radio>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12" v-if="!temp.type">
            <el-form-item label="查询方式" prop="isUserSql">
              <el-radio v-model="temp.isUserSql" :label="1">字段查询</el-radio>
              <el-radio v-model="temp.isUserSql" :label="0">自定义SQL</el-radio>
            </el-form-item>
          </el-col>
      		<el-col :span="12" v-else>
            <el-form-item label="写稿类型" prop="writingType">
              <el-select v-model="temp.writingType" placeholder="请选择">
                <el-option
                  v-for="(option, index) in writingTypeList" :key="option.dictKey" :value="option.dictKey"
                  :label="option.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
              <el-form-item label="是否自动处理" prop="newsUpdateStatus">
                <el-switch
                v-model="temp.newsUpdateStatus"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!temp.isUserSql" :gutter="24">
          <el-col :span="24">
            <el-form-item label="查询语句" prop="userSql">
              <el-input v-model="temp.userSql" :rows="12" type="textarea" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-else :gutter="24">
          <el-col :span="12">
            <el-form-item label="查询条件" prop="tbWhere">
              <el-input v-model="temp.tbWhere" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据表名称" prop="tbName">
              <el-input v-model="temp.tbName" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内容字段别名" prop="newsContentAlias">
              <el-input v-model="temp.newsContentAlias" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据主键字段别名" prop="newsIdAlias">
              <el-input v-model="temp.newsIdAlias" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据标题字段别名" prop="newsTitleAlias">
              <el-input v-model="temp.newsTitleAlias" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据来源字段别名" prop="newsSourceAlias">
              <el-input v-model="temp.newsSourceAlias" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据作者字段别名" prop="newsAuthAlias">
              <el-input v-model="temp.newsAuthAlias" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据发布时间字段别名" prop="newsPublishTimeAlias">
              <el-input v-model="temp.newsPublishTimeAlias" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据撰写时间字段别名" prop="newsAddAlias">
              <el-input v-model="temp.newsAddAlias" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="查询时间字段别名" prop="newsUpdatetimeAlias">
              <el-input v-model="temp.newsUpdatetimeAlias" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <!--<el-col :span="12" v-if="dialogStatus !=='create'">-->
            <!--<el-form-item label="启用状态" prop="enabled">-->
              <!--<el-select v-model="temp.enabled" type="text" placeholder="请选择">-->
                <!--<el-option :value="0" label="启用"></el-option>-->
                <!--<el-option :value="1" label="禁用"></el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :span="12" >
            <el-form-item label="所属栏目" prop="ClassName">
              <el-popover
                placement="bottom-start"
                trigger="click"
                v-model="visiblePopover2"
                @show="filterText1 = ''"
              >
                <el-input
                  placeholder="输入关键字进行过滤"
                  v-model="filterText1">
                </el-input>
                <el-tree
                  :filter-node-method="filterNode2"
                  ref="tree1" :props="props" :data="treeList" :highlight-current="false" node-key="id"
                  :default-expand-all="true" :render-content="renderContent2"
                >
                </el-tree>
                <el-select
                  multiple popper-class="hide" slot="reference" v-model="temp.ClassName" type="text"
                  placeholder="请输入"
                >
                  <el-option
                    v-for="(item, index) in options" :key="item.ClassId" :value="item.ClassId" :label="item.ClassName"
                  ></el-option>
                </el-select>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="temp.remark" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="warning" :loading="testLoading" @click="testData()">测试{{testLoading?'中..':''}}
        </el-button>
        <el-button :disabled="!testPass" v-if="dialogStatus=='create'" type="primary"
          @click="createData">{{$t('table.confirm')}}
        </el-button>
        <el-button :disabled="!testPass" v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="设置启动时间"
      :visible.sync="timeDialogVisible"
      width="900"
    >
      <el-form :rules="timeRules" :model="timeTemp" label-position="left" label-width="120px" style='margin: 24px'>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="数据源名称" prop="name">
              <span>&emsp;{{timeTemp.name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据源启动方式" prop="type">
              <el-select default-first-option v-model="timeTemp.type" type="text" placeholder="请输入">
                <el-option :value="0" label="以上次停用时间启动"></el-option>
                <el-option :value="1" label="手动选择时间启动"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据源停用时间" prop="lastTime">
              <el-input disabled v-model="timeTemp.lastTime" type="text" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="!!timeTemp.type" label="更新起始时间" prop="time">
              <el-date-picker v-model="timeTemp.time" type="datetime" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center; padding: 0 0 24px">
        <el-button type="default" @click="timeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="setTime(timeTemp)">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    databaseList,
    dataSourceGet,
    dataSourceList,
    dataSourceTest,
    dataSourceAdd,
    dataSourceSetTime,
    dataSourcePut,
    dataSourceDelete,
    dataCategoryList
  } from '@/api/data'
  import { listList } from '../../api/column'
  import pinyin from 'pinyin'

  export default {
    name: 'complexTable',
    watch: {
      filterText1(val) {
        this.$refs.tree1.filter(val)
      },
      filterText2(val) {
        this.$refs.tree2.filter(val)
      },
      filterText3(val) {
        this.$refs.tree3.filter(val)
      },
      filterText4(val) {
        this.$refs.tree4.filter(val)
      },
      filterText5(val) {
        this.$refs.tree5.filter(val)
      }
    },
    data() {
      return {
        filterText1: '',
        filterText2: '',
        filterText3: '',
        filterText4: '',
        filterText5: '',
        props: {
          label: 'name',
          id: 'code',
          key: 'code'
        },
        tableKey: 0,
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          pageSize: 20,
          cmsNewsClassId: '',
          enabled: ''
        },
        showReviewer: false,
        dbList: [],
        // writingTypeList:[],
        treeList: [{
          name: '栏目列表',
          id: 0,
          children: []
        }],
        options: [],
        timeTemp: {
          id: '',
          name: '',
          type: 0,
          lastTime: '',
          time: ''
        },
        temp: {
          dbName: '',
          dbSourceId: '',
          type: 0,
          // writingType:'',
          enabled: 1,
          isUserSql: 1,
          id: '',
          lastTime: '',
          remark: '',
          newsContentAlias: '',
          tbName: '',
          tbWhere: '',
          newsIdAlias: '',
          newsUpdateStatus:true,
          tbTitleAlias: '',
          newsUpdatetimeAlias: '',
          newsTitleAlias: '',
          newsPublishTimeAlias: '',
          newsAddAlias: '',
          newsSourceAlias: '',
          newsAuthAlias: '',
          userSql: '',
          ClassName: [],
          ClassId: []
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '新增'
        },
        dialogPvVisible: false,
        visiblePopover: false,
        visiblePopover2: false,
        timeDialogVisible: false,
        pvData: [],
        timeRules: {},
        rules: {
          name: [{ required: true, message: '请输入', trigger: 'change' }],
          dbSourceId: [{ required: true, message: '请选择', trigger: 'change' }],
          type: [{ required: true, message: '请选择', trigger: 'change' }],
          // writingType: [{ required: true, message: '请选择', trigger: 'change' }],
          dbName: [{ required: true, message: '请输入', trigger: 'change' }],
          isUserSql: [{ required: true, message: '请输入', trigger: 'change' }],
          userSql: [{ required: true, message: '请输入', trigger: 'change' }],
          tbName: [{ required: true, message: '请输入', trigger: 'change' }],
          newsContentAlias: [{ required: true, message: '请输入', trigger: 'change' }],
          newsIdAlias: [{ required: true, message: '请输入', trigger: 'change' }],
          newsTitleAlias: [{ required: true, message: '请输入', trigger: 'change' }],
          newsSourceAlias: [{ required: true, message: '请输入', trigger: 'change' }],
          newsAuthAlias: [{ required: true, message: '请输入', trigger: 'change' }],
          enabled: [{ required: true, message: '请输入', trigger: 'change' }],
          lastTime: [{ required: true, message: '请输入', trigger: 'change' }],
          newsAddAlias: [{ required: true, message: '请输入', trigger: 'change' }],
          newsPublishTimeAlias: [{ required: true, message: '请输入', trigger: 'change' }],
          ClassName: [{ required: true, message: '请输入', trigger: 'blur' }],
          tbTitleAlias: [{ required: true, message: '请输入', trigger: 'change' }],
          newsUpdatetimeAlias: [{ required: true, message: '请输入', trigger: 'change' }]
        },
        downloadLoading: false,
        testPass: false,
        testLoading: false
      }
    },
    created() {
      this.getList()
      this.getNodeList()
      // this.getCategoryList()  //获取机器写稿类型
    },
    mounted() {
      this.$watch(
        function() {
          return JSON.stringify(this.temp)
        },
        function() {
          this.testPass = false
        }
      )
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1 || pinyin(data.name, {
          style: pinyin.STYLE_FIRST_LETTER,
          heteronym: true
        }).join('').indexOf(value) !== -1
      },
      filterNode2(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1 || pinyin(data.name, {
          style: pinyin.STYLE_FIRST_LETTER,
          heteronym: true
        }).join('').indexOf(value) !== -1
      },
			getColumn(val){
				if(val){
	        listList({
			      pageNum: 1,
			      pageSize: 10000,
			      parentName:"机器写稿"
					}).then(response => {
	        	const data = response.Data[0]
	        	this.temp.ClassId.length = 0
	        	this.temp.ClassId.push(data.id)
	        	this.temp.ClassName.length = 0
	        	this.temp.ClassName.push(data.name)
	        })
				} else {
					this.temp.ClassId.length = 0
					this.temp.ClassName.length = 0
				}
			},
    	getNodeList(parm) {
        listList({
		      pageNum: 1,
		      pageSize: 10000
				}).then(response => {
          const temp = {}
          const result = []
          const data = response.Data
          const length = data.length
          for (let i = 0; i < length; i++) {
            temp[data[i].id] = data[i]
            this.options.push({
              label: data[i].name,
              value: data[i].id
            })
          }
          for (let i = 0; i < length; i++) {
            if (temp[data[i].id].parentId && temp[data[i].parentId]) {
              if (!temp[data[i].parentId].children) {
                temp[data[i].parentId].children = []
              }
              temp[data[i].parentId].children.push(temp[data[i].id])
            } else {
              result.push(temp[data[i].id])
            }
          }
      		this.treeList[0].children = Object.assign([], result)
        })
      },
      selectNode(node, data, e) {
        e.stopPropagation()
        this.listQuery.cmsNewsClassId = data.id
        this.visiblePopover = false
      },
      selectNode2(node, data, e) {
        e.stopPropagation()
        this.temp.ClassName = [data.name]
        this.temp.ClassId = [data.id]
        this.temp.classId = data.id
        this.visiblePopover2 = false
      },
      getCategoryList(){
    		dataCategoryList({ type: 'jiqixiegao' }).then(response => {
          this.writingTypeList = response.Data
        })
      },
      getList() {
        this.listLoading = true
        dataSourceList(this.listQuery).then(response => {
          this.listLoading = false
          this.list = response.Data
          this.total = parseInt(response.total)
        })
        databaseList({
          pageNum: 1,
          pageSize: 9999
        }).then(response => {
          this.dbList = response.Data
        })
      },
      handleFilter() {
        this.listQuery.pageNum = 1
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val
        this.getList()
      },
      handleModifyStatus(row, status) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        row.status = status
      },
      resetTemp() {
        this.temp = {
          dbName: '',
          dbSourceId: '',
          type: 0,
          // writingType:'',
          enabled: 1,
          isUserSql: 1,
          id: '',
          lastTime: '',
          remark: '',
          newsContentAlias: '',
          tbName: '',
          tbWhere: '',
          newsIdAlias: '',
          tbTitleAlias: '',
          newsUpdatetimeAlias: '',
          newsTitleAlias: '',
          newsPublishTimeAlias: '',
          newsAddAlias: '',
          newsSourceAlias: '',
          newsAuthAlias: '',
          userSql: '',
          ClassName: [],
          ClassId: [],
          newsUpdateStatus:true
        }
      },
      resetTimeTemp() {
        this.timeTemp = {
          id: '',
          name: '',
          type: 0,
          lastTime: '',
          time: ''
        }
      },
      handleSetTime(e) {
        this.resetTimeTemp()
        this.timeTemp.id = e.id
        this.timeTemp.name = e.sourceName
        this.timeTemp.lastTime = e.lastTime
        this.timeDialogVisible = true
      },
      setTime(e) {
        const params = {}
        params.id = e.id
        params.enabled = 0
        if (e.time !== '') params.lastTime = e.time
        dataSourceSetTime(params).then(() => {
          this.getList()
          this.timeDialogVisible = false
          this.$notify({
            title: '成功',
            message: '设置成功',
            type: 'success',
            duration: 2000
          })
        })
      },
      setStop(e) {
        const params = {}
        params.id = e.id
        params.enabled = 1
        dataSourceSetTime(params).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '设置成功',
            type: 'success',
            duration: 2000
          })
        })
      },
      handleCreate() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      testData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.testLoading = true
            let tempObj = {...this.temp}
            tempObj.newsUpdateStatus = tempObj.newsUpdateStatus?0:1;
            dataSourceTest(tempObj).then(() => {
              this.testLoading = false
              this.testPass = true
              this.$notify({
                title: '成功',
                duration: 5000,
                message: '测试通过',
                type: 'success'
              })
            }).catch(() => {
              this.testLoading = false
              this.testPass = false
              this.$notify({
                title: '失败',
                duration: 5000,
                type: 'error',
                message: '测试未通过，请检查配置'
              })
            })
          }
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid && this.testPass) {
             let tempObj = {...this.temp}
            tempObj.newsUpdateStatus = tempObj.newsUpdateStatus?0:1;
            dataSourceAdd(tempObj).then(() => {
              this.getList()
              this.dialogFormVisible = false
              this.testPass = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 5000
              })
            })
          }
        })
      },
      handleUpdate(row) {
        dataSourceGet(row).then(response => {
          let dbName = ''
          this.options.map((val) => {
            if (val.value === response.Data[0].classId) {
              dbName = val.label
            }
          })
          this.temp = {...response.Data[0]}
          this.temp.newsUpdateStatus  = this.temp.newsUpdateStatus?false:true;
          this.temp.ClassId = [response.Data[0].classId]
          this.temp.ClassName = [dbName]
          // this.temp.writingType = this.temp.writingType + ''
          this.dialogStatus = 'update'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        })
      },
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid && this.testPass) {

            let tempObj = {...this.temp}
            tempObj.newsUpdateStatus = tempObj.newsUpdateStatus?0:1;

            const tempData = Object.assign({}, tempObj)
            tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
            tempData.classId = tempObj.ClassId[0]
            dataSourcePut(tempData).then(() => {
              this.getList()
              this.dialogFormVisible = false
              this.testPass = false
              this.$notify({
                title: '成功',
                message: '数据源配置更新成功',
                type: 'success',
                duration: 5000
              })
            })
          }
        })
      },
      handleDelete(row) {
        this.$confirm('确认删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dataSourceDelete(row).then(() => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      renderContent(h, { node, data, store }) {
        return (
          <span class={(node.isLeaf && node.level > 1) ? 'custom-tree-node' : 'custom-tree-node custom-tree-notLeaf'}>
            <span className='tree-label'>{node.label}&nbsp;</span>
            <span>
              {(node.level > 1 && node.isLeaf) ? <el-button
                size='mini' type='text'
                on-click={(e) => this.selectNode(node, data, e)}
              >选择</el-button> : ''}
            </span>
          </span>
        )
      },
      renderContent2(h, { node, data, store }) {
        return (
          <span class={(node.isLeaf && node.level > 1) ? 'custom-tree-node' : 'custom-tree-node custom-tree-notLeaf'}>
            <span className='tree-label'>{node.label}&nbsp;</span>
            <span>
              {(node.level > 1 && node.isLeaf) ? <el-button
                size='mini' type='text'
                on-click={(e) => this.selectNode2(node, data, e)}
              >选择</el-button> : ''}
            </span>
          </span>
        )
      }
    }
  }
</script>

<style>
  .hide {
    display: none;
  }


  .el-popover {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 600px;
  }

  .nowrap {
    white-space: nowrap;
  }

  .el-tooltip__popper {
    max-width: 50%;
  }

  .el-dialog {
    width: 900px;
  }
</style>
